<template>
  <view class="my-family">
    <view class="family-member">
      <text class="member-text">照护人员</text>
      <view class="member-right" @tap="goMemberDetai">
        <text class="rght-text">全部</text>
      </view>
    </view>

    <view class="family-item">
      <image class="avator-family" src="@/static/images/defAvator.png" mode="scaleToFill" />
      <view class="info-item">
        <text class="phone-number">15025793464</text>
        <view class="member-info">
          <text class="info-name">照护人：张三</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
// 跳转到照护人员页面
const goMemberDetai = () => {
  uni.navigateTo({
    url: '/pkg/careMember/index',
  })
}
</script>

<style scoped lang="scss">
.my-family {
  background-color: #ffffff;
  margin-top: 20rpx;

  border-radius: 22rpx;
  padding: 20rpx 20rpx 30rpx 20rpx;
  .family-member {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20rpx;

    .member-right {
      display: flex;
      align-items: center;
      vertical-align: middle;
      line-height: 40rpx;
      .rght-text {
        font-size: 30rpx;
        padding-left: 10rpx;
        color: #909090;
      }
      .icon-size {
        width: 36rpx;
        height: 36rpx;
      }
    }
  }
  .family-item {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 22rpx;
    padding: 20rpx;
    height: 200rpx;
    .avator-family {
      width: 140rpx;
      height: 140rpx;
      border-radius: 50%;
    }
    .info-item {
      display: flex;
      flex-direction: column;
      padding-left: 20rpx;
      .phone-number {
        padding: 20rpx 0;
        font-weight: 600;
      }
      .member-info {
        padding: 20rpx 0;
        font-size: 28rpx;
      }
    }
  }
}
</style>
